<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/swiper-3.4.2.min.css"/>
		<link rel="stylesheet" type="text/css" href="../style/fjol_style.css"/>
		<link rel="stylesheet" type="text/css" href="../style/xol_style.css"/>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav newbgRed">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title" style="top: 0px;"></h1>
		</header>
		<div class="mui-content">
		    <!--swiper轮播-->
			<div class="swiper-container">
			    <div class="swiper-wrapper" id="swiperWrap">
			    	
			    </div>
			</div>
		</div>
		
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-2.1.0.js"></script>
		<script src="../js/jquery.tmpl.min.js"></script>
		<script src="../js/swiper-3.4.2.jquery.min.js"></script>
		
		<script id="photoListTmpl" type="text/x-jquery-tmpl">
			<div class="swiper-slide"><img src="${fullUrl}" style="max-height: 100%; max-width: 100%;"/></div>
		</script>
		
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function(){
				var wv = plus.webview.currentWebview();
				var albumlist = wv.albumlist;
				var liIndex = wv.liIndex;
//				console.log(liIndex);
				var photolist = albumlist[liIndex].photoList;
				
				$('#photoListTmpl').tmpl(photolist).appendTo('#swiperWrap');
				
				var mySwiper = new Swiper ('.swiper-container', {
					    direction: 'horizontal',
					    loop: true,
					    autoplay:4000,
					    autoplayDisableOnInteraction : false,	//false：用户操作后自动不会停止
					    // 如果需要分页器
					    pagination: '.mui-title',
					    paginationType : 'fraction',
					  });
					  
				var imgObj = $('#swiperWrap img');
				var winHeight = $(window).height();
				$('.swiper-wrapper').height(winHeight);
//				console.log(imgObj.length);
				imgObj.each(function(){
					var thisHeight = $(this).height();
					var marginTop = parseFloat((winHeight-thisHeight-44)/2);
					$(this).css('margin-top',marginTop);
				})
			})
		</script>
	</body>

</html>